<!-- 账号注销 -->
<template>
  <view class="accountcancellation-box">
    <view class="accountcancellation_text">
      <u-form
        :model="form"
        ref="uForm"
        :label-width="290"
        :label-position="'top'">
        <u-form-item
          label="选择注销原因"
          prop="radio"
          :border-bottom="false">
          <view class="card-icon-big-box">
            <view class="card-icon-box">
              <view></view>
              <view></view>
            </view>
          </view>
          <u-radio-group
            v-model="form.radio"
            wrap>
            <u-radio
              v-for="(item, index) in radioList"
              :key="index"
              :name="item.name"
              icon-size="28"
              label-size="28">
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <view v-if="form.radio == '其他原因'">
          <u-input
            style="flex: 1"
            type="textarea"
            v-model="form.reason"
            :maxlength="50"
            placeholder="请输入其他原因(50字)" />
        </view>
      </u-form>
      <u-button
        type="primary"
        @click="submit"
        class="vehiclemanagement-index-btn"
        >注销</u-button
      >
    </view></view
  >
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  name: 'accountcancellation',
  data() {
    return {
      radioList: [
        {
          name: '操作繁琐'
        },
        {
          name: '货源少'
        },
        {
          name: '结算慢'
        },
        {
          name: '服务差'
        },
        {
          name: '转行作别的'
        },
        {
          name: '其他原因'
        }
      ],
      form: {
        radio: undefined, //选择注销原因
        reason: undefined //验证码
      },
      rules: {
        radio: [
          {
            required: true,
            message: '请选择注销原因',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    //跳登录
    loginBtn() {
      uni.reLaunch({
        url: '/pages/login/login'
      })
    },

    //提交
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.submitData()
        } else {
          this.$api.msg('请填写相关信息')
        }
      })
    },
    ...mapMutations(['logout']),
    // 注销成功提交
    async submitData() {
      const { code, result, message } = await this.$u.post(
        '/freight-business/freightDriver/driver/delete',
        {
          // accountName: this.$store.state.userInfo.userAccount,
          cancelReasons: this.form.radio,
          otherReasons: this.form.reason
        }
      )
      if (code === '0') {
        this.$api.msg('注销成功')
        this.logout()
        this.isShowpasswordresetbox = false
        // setTimeout(() => {
        //   uni.redirectTo({
        //     url: "/pages/login/login",
        //   });
        // }, 200);
        // // #ifdef APP-PLUS
        plus.runtime.quit()
        // // #endif
      } else {
        this.$api.msg(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.accountcancellation-box {
  width: 100%;
  height: 100vh;
  background: #f6f6f6;
  padding: 24rpx 30rpx 40rpx;
  .accountcancellation_text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .login-logo {
      width: 240rpx;
      height: 60rpx;
      margin: 40rpx 0 0 0;
    }
    .u-form {
      background: #fff;
      border-radius: 10rpx;
      padding: 0 24rpx;
      /deep/.u-form-item--left__content__label {
        position: relative;
        font-weight: 600;
        font-size: 28rpx;
      }
      .card-icon-big-box {
        position: absolute;
        top: 78rpx;
        left: 210rpx;
        .card-icon-box {
          position: relative;
          view:nth-child(1) {
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background: #57a3ff;
            position: absolute;
            top: -12rpx;
            left: 10rpx;
            z-index: 1;
          }
          view:nth-child(2) {
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background: #add3ff;
            position: absolute;
            top: -6rpx;
            left: 20rpx;
          }
        }
      }
      /deep/.u-radio-group {
        width: 100%;
      }
      /deep/.u-radio {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #e5e5e5;
        position: relative;
        .u-radio__label {
          position: absolute;
          left: 0;
        }
        .u-radio__icon-wrap {
          position: absolute;
          right: 0;
        }
      }
    }
  }
  .row-box {
    display: flex;
    margin-right: 16rpx;
  }
  .getCode-box {
    width: 100rpx;
    margin-left: 10rpx;
  }
  .u-btn--primary {
    width: 100%;
  }
  ::v-deep .u-radio__icon-wrap {
    order: 2;
  }
}
</style>
